import { Gallery } from "devextreme-react";
// import { gallerys } from './data';
import { Row, Col, Typography } from 'antd';
import styles from './style/index.less';
import { useEffect, useState } from "react";
import { useModel } from 'umi';
import { getProjectList } from "./service";

export interface ProjectData {
    id: number | string,
    user_name: string,
    role_name: string,
    Img: string
}

const { Text } = Typography;

const ProjectMembers = () => {

    const { initialState } = useModel('@@initialState');
    const { zcbfid } = initialState?.curPart as API.CurPart;

    const [state, setstate] = useState([])

    const ProjectData = async () => {
        const name = 'home.userList'
        const res = await getProjectList({ name, zcbfid })
        setstate(res);
    };
    useEffect(() => {
        ProjectData()
    }, [])

    const Item = (item: ProjectData[]) => {
        return <div className={styles.Box}>
            {
                item.map((v: ProjectData) => {
                    return <div style={{ width: '45%', height: '50px', display: 'flex', alignContent: 'center', justifyContent: 'center' }}>
                        <div>
                            <img src={require('../user-info/avatar.png')} style={{ width: '50px', height: '50px', borderRadius: '50%' }} alt='图片' />
                        </div>
                        <div style={{ marginTop: '5px', width: '100px', marginLeft: '5px', textAlign: 'left' }}>
                            <Text ellipsis={{ tooltip: v.user_name }} style={{ fontSize: '14px', color: 'rgba(51, 51, 51, 1)' }}>
                                {v.user_name}
                            </Text>
                            <p style={{ fontSize: '12px', color: 'rgba(102, 102, 102, 1)', marginTop: '5px' }}>{v.role_name}</p>
                        </div>
                    </div>
                })
            }
        </div>
    }

    function group(array: ProjectData[], number: number) {
        let index = 0;
        const newArray = [];
        while (index < array.length) {
            newArray.push(array.slice(index, index += number));
        }
        return newArray
    }

    const Data = group(state, 6)
    return (
        <div className={styles.container}>
            <Row align="middle">
                <Col span={23} className={styles.title}>
                    项目成员
                </Col>
            </Row>
            <Row className={styles.footer}>
                <Gallery
                    dataSource={Data}
                    // 显示导航按钮
                    showNavButtons={true}
                    showIndicator={false}
                    animationEnabled={true}
                    // 鼠标滑动 切换界面
                    swipeEnabled={false}
                    itemRender={Item}
                />
            </Row>
        </div>
    )
}
export default ProjectMembers;
